<!-- 用户信息和订单卡片 -->
<template>
	<view class="sh-userinfo-box">
		<image class="user-bg" :src="$IMG_URL + '/user/gr_user_bg.png'"></image>
		<view class="head-wrap">
			<cu-custom :isBack="true" :showBackIcon="false">
				<block slot="backText"><text class="nav-title">我的</text></block>
			</cu-custom>
			<!-- 个人信息 -->
			<view class="user-head x-bc mb20">
				<view class="x-f">
					<!-- 微信小程序 -->
					<view class="info-box">
						<view class="x-f">
							<view class="head-img-wrap">
								<image class="head-img" @tap.stop="jump('/pages/user/info')" :src="userInfo.avatar || $IMG_URL + '/base_avatar.png'" mode="aspectFill"></image>
							</view>
							<view class="">
								<view @tap.stop="jump('/pages/user/info')" class="user-name one-t">{{ userInfo.nickname || '请登录~' }}</view>
								<view v-if="userInfo.mobile" class="user-mobile">{{ userInfo.mobile }}</view>
							</view>
						</view>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<view class="grade-tag tag-box x-f" v-if="!userInfo.mobile">
						<button class="cu-btn sm phone-btn" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">同步手机号</button>
					</view>
					<!-- #endif -->
				</view>
				<view class="x-f">
					<button class="cu-btn code-btn" v-if="userInfo.avatar" @tap="jump('/pages/public/poster/index', { posterType: 'user' })">
						<text class="cuIcon-qr_code"></text>
					</button>
					<button v-if="userInfo.is_store" @tap="goStore" class="cu-btn merchant-btn">进入门店</button>
				</view>
			</view>
			<!-- 资产 -->
			<view class="wallet-wrap x-bc">
				<view class="wallet-box wallet-item x-f" @tap="$Router.push({ path: '/pages/user/wallet/index' })">
					<view class="item-title">余额</view>
					<view class="item-value wallet-num mx10">{{ userInfo.money || '0' }}</view>
					<text class="cuIcon-right"></text>
				</view>
				<text class="cuIcon-move"></text>
				<view class="coupon-box wallet-item x-f" @tap="$Router.push({ path: '/pages/user/wallet/score-index' })">
					<view class="item-title">积分</view>
					<view class="item-value coupon-num mx10 ">{{ userInfo.score || '0' }}</view>
					<text class="cuIcon-right"></text>
				</view>
			</view>
			<!-- 订单卡片 -->
			<view class="order-wrap">
				<view class="order-head x-bc mb20">
					<view class="order-title">我的订单</view>
					<view class="order-all" @tap="jump('/pages/order/list', { type: 'all' })">
						全部订单
						<text class="cuIcon-right"></text>
					</view>
				</view>
				<view class="order-content x-ac">
					<view class="" v-for="item in orderList" :key="item.title" @tap="jump('/pages/order/list', { type: item.type })">
						<view class="order-item y-f">
							<image class="item-img" :src="item.img" mode=""></image>
							<view class="item-title mt20">{{ item.title }}</view>
							<view class="cu-tag badge" v-if="orderStatus && orderStatus[item.type]">{{ orderStatus[item.type] }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * 自定义之个人信息
 */
import { mapMutations, mapActions, mapState } from 'vuex';
import Wechat from '@/common/wechat';

export default {
	components: {},
	data() {
		return {
			platform: uni.getStorageSync('platform'), //当前平台。
			isRefresh: false, //更新
			orderList: [
				{
					id: 1,
					title: '待付款',
					img: this.$IMG_URL + '/user/qz_order1.png',
					type: 'nopay'
				},
				{
					id: 2,
					title: '待服务',
					img: this.$IMG_URL + '/user/qz_order2.png',
					type: 'nosend'
				},
				{
					id: 3,
					title: '服务中',
					img: this.$IMG_URL + '/user/qz_order3.png',
					type: 'noget'
				},
				{
					id: 4,
					title: '待评价',
					img: this.$IMG_URL + '/user/qz_order4.png',
					type: 'nocomment'
				}
			]
		};
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			orderStatus: state => state.user.orderStatus
		})
	},
	methods: {
		...mapActions(['getCartList', 'getUserInfo']),
		jump(path, query) {
			this.$Router.push({
				path: path,
				query: query
			});
		},
		// 获取微信手机号
		async decryptPhoneNumber(e) {
			// let wechat = new Wechat();		// @sn 0801
			this.$api('user.wxMiniProgramPhone', {
				session_id: await Wechat.getWxMiniProgramSessionKey(false),
				encryptedData: e.detail.encryptedData,
				iv: e.detail.iv,
				type: 'bind'
			}).then(res => {
				if (res.code === 1) {
					this.getUserInfo();
				}
			});
		},
		// 跳转门店
		goStore() {
			if (this.userInfo.store_id) {
				uni.setStorageSync('storeId', this.userInfo.store_id);
				this.jump('/pages/app/merchant/index', { storeId: this.userInfo.store_id });
			} else {
				if (uni.getStorageSync('storeId')) {
					this.jump('/pages/app/merchant/index');
				} else {
					this.jump('/pages/app/merchant/list');
				}
			}
			//  #ifdef MP-WEIXIN
			this.$store.dispatch('getMessageIds', 'store');
			//  #endif
		},
		// 跳转客服
		onService() {
			this.$Router.push('/pages/public/kefu/index');
		},
		// 更新信息
		onRefresh() {
			const that = this;
			that.isRefresh = true;
			setTimeout(() => {
				that.isRefresh = false;
			}, 200);
		},
		refreshWechatUser(e) {
			this.onRefresh();
			if (this.platform === 'wxOfficialAccount') {
				// let wechat = new Wechat();		// @sn 0801
				Wechat.login();
			} else if (this.platform === 'wxMiniProgram') {
				this.$store.commit('FORCE_OAUTH', true);
			}
		}
	}
};
</script>

<style lang="scss">
.sh-userinfo-box {
	position: relative;
	height: 550rpx;
	.user-bg {
		width: 100%;
		height: 454rpx;
	}
	.head-wrap {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		z-index: 9;
		top: 0;

		.nav-title {
			font-size: 38rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #fff;
			position: relative;
			.cuIcon-servicefill {
				position: absolute;
				z-index: 7;
				color: #fff;
				top: 0rpx;
				right: 30rpx;
				font-size: 50rpx;
			}
		}
		.status-bar {
			// #ifndef H5
			height: var(--status-bar-height);
			// #endif
			// #ifdef H5
			height: 50rpx;
			// #endif
			width: 750rpx;
		}
	}

	.user-head {
		padding-top: 50rpx;

		.info-box {
			padding-left: 30rpx;
			.head-img-wrap {
				position: relative;
				.refresh-btn {
					position: absolute;
					padding: 0;
					background: none;
					width: 34rpx;
					height: 34rpx;
					border-radius: 50%;
					background: #c9912c;
					top: 0;
					right: 20rpx;
					.cuIcon-refresh {
						color: #fff;
						font-size: 24rpx;
					}
					.refresh-rotate {
						transform: rotate(360deg);
						transition: all 0.2s;
					}
				}
			}
			.head-img {
				width: 94rpx;
				height: 94rpx;
				border-radius: 50%;
				background: #ccc;
				margin-right: 25rpx;
				overflow: hidden;
			}

			.user-name {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #fff;
				line-height: 30rpx;
				width: 130rpx;
			}
			.user-mobile {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #fff;
				margin-top: 10rpx;
			}
		}
		.tag-box {
			background: rgba(0, 0, 0, 0.2);
			border-radius: 30rpx;
			line-height: 38rpx;
			padding: 0 20rpx;
			margin-left: 10rpx;
			.phone-btn {
				padding: 0;
				background: none;
				color: #fff;
			}
		}
		.code-btn {
			background: none;
			.cuIcon-qr_code {
				font-size: 50rpx;
				color: #fff;
			}
		}
		.merchant-btn {
			padding: 0;
			width: 136rpx;
			height: 46rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 23rpx 0px 0px 23rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
	}
	.wallet {
		font-size: 20rpx;
		padding-left: 140rpx;
		.money {
			margin-right: 40rpx;
		}
	}
}
// 资产
.wallet-wrap {
	.cuIcon-move {
		color: rgba(#fff, 0.3);
		transform: rotate(90deg);
	}
	.wallet-item {
		flex: 1;
		justify-content: center;
		.item-title {
			font-size: 26rpx;
			font-weight: 500;
			color: rgba(#fff, 0.8);
		}
		.item-value {
			font-size: 30rpx;
			font-weight: 500;
			color: #ffffff;
		}
		.cuIcon-right {
			font-size: 26rpx;
			color: rgba(#fff, 0.8);
			line-height: 26rpx;
		}
		.wallet-num {
			&::before {
				content: '￥';
				font-size: 24rpx;
			}
		}
		.coupon-num {
			&::after {
				content: '个';
				font-size: 24rpx;
				margin-left: 10rpx;
			}
		}
	}
}
// 订单卡片
.order-wrap {
	background-color: #fff;
	border-radius: 10rpx;
	margin: 20rpx;
	padding: 30rpx 20rpx 30rpx 30rpx;
	.order-head {
		.order-title {
			font-size: 34rpx;
			font-weight: bold;
			color: #000000;
		}
		.order-all {
			font-size: 24rpx;
			font-weight: 400;
			color: #b1b3c7;
		}
	}
	.order-item {
		position: relative;
		.item-img {
			width: 50rpx;
			height: 50rpx;
		}
		.item-title {
			font-size: 26rpx;
			font-weight: 500;
			color: #000000;
		}
	}
}
</style>
